<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ExportExcel</title>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">

	<!-- 输入框 -->
	<div style="margin-top: 15px;">
		<el-input placeholder="请输入查询的关键字" v-model="input" class="input-with-select">
			<el-button slot="append" icon="el-icon-search" @click="searchKw"></el-button>
		</el-input>
	</div>
	<!-- 输入框/ -->

	<!-- 显示表格 -->
	<el-row style="border: 1px solid #DCDFE6;border-radius: 4px;padding:10px;margin-top: 16px">
		<template>
			<el-table
				ref="multipleTable"
				:data="tableData"
				tooltip-effect="dark"
				style="width: 100%"
				height="500"
				@selection-change="handleSelectionChange">

				<el-table-column
					type="selection"
					width="55">
				</el-table-column>

				{% for title in title_list %}
					<el-table-column
						prop="{{ title }}"
						label="{{ title }}"
						width="120">
					</el-table-column>
				{% endfor %}

			</el-table>

		</template>
	</el-row>
	<!-- 显示表格/ -->

<el-row style="text-align: center; margin-top: 16px">
  <el-button onclick="window.location.href='/export/search'">导出查询</el-button>
  <el-button onclick="window.location.href='/export/select'">导出选择</el-button>
</el-row>

</div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    delimiters: ['{[', ']}'],
    data: function () {
      return {
        input: '',
        tableData: [],
        multipleSelection: []
      }
    },
    created: function () {
      this.get_data('')
    },
    methods: {
      get_data: function (kw) {
        fetch('/api/search/?kw=' + kw)
          .then(res => res.json())
          .then(result => this.tableData = result.tableData)
      },
      searchKw: function () {
        let kw = this.input
        this.get_data(kw)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        let idList = []
        this.multipleSelection.forEach(x => idList.push(x['id']))
	      fetch('/api/select/?id_list=' + JSON.stringify(idList))
      }
    }

  })
</script>
</html>